<template>
  <section class="app-main" :style="[hiddenSidebarStyle]">
    <div class="container is-fluid is-marginless app-content">
      <level-bar></level-bar>
      <transition
       mode="out-in"
       enter-active-class="fadeIn"
       leave-active-class="fadeOut"
       appear>
          <router-view keep-alive class="animated"></router-view>
        </transition>
    </div>
  </section>
</template>

<script>
  import LevelBar from './LevelBar'
  import {mapGetters} from 'vuex'
  export default {
    computed: {
      ...mapGetters({
        sidebar: 'sidebar'
      }),
      hiddenSidebarStyle () {
        return this.sidebar.hidden ? {'margin-left': 0} : null
      }
    },
    components: {
      'level-bar': LevelBar
    }
  }
</script>
<style lang="scss">
  @import '~bulma/sass/utilities/initial-variables';
  @import '~bulma/sass/utilities/mixins';

  .app-main {
    padding-top: 50px;
    margin-left: 180px;
    transform: translate3d(0, 0, 0);

  @include mobile() {
    margin-left: 0;
  }

  }
  .app-content {
    padding: 20px;
  }
</style>
